<style>
td.change-status{cursor:pointer;}
.change-status span:hover{background-color:yellow;}
</style>
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-cf"><?php echo $category['title']; ?></div>
                </div>
                <div class="widget-body am-fr">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <div class="am-form-group">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a class="am-btn am-btn-default am-btn-success am-radius"
                                       href="<?php echo url('add' , ['category_id'=>$category['id']]); ?>">
                                        <span class="am-icon-plus"></span> 新增
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="am-scrollable-horizontal am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped
                         tpl-table-black am-text-nowrap">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>图片</th>
                                <th>标签</th>
                                <th>作者</th>
                                <th>焦点</th>
                                <th>显示</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php if (!$list->isEmpty()): foreach ($list as $item): ?>
                                <tr>
                                    <td class="am-text-middle"><?php echo $item['id']; ?></td>
                                    <td class="am-text-middle">
                                        <p class="item-title"><?php echo $item['title']; ?></p>
                                    </td>
                                    <td class="am-text-middle">
                                        <a href="<?php echo $item['pic']; ?>"
                                           title="点击查看大图" target="_blank">
                                            <img src="<?php echo $item['pic']; ?>"
                                                 width="30" height="30" alt="图片">
                                        </a>
                                    </td>
                                    <td class="am-text-middle"><?php echo $item['tags']; ?></td>
                                    <td class="am-text-middle"><?php echo $item['author']; ?></td>
                                    <td class="am-text-middle change-status change-atype" 
                                        data-atype="<?php echo $item['atype']; ?>"  data-id="<?php echo $item['id']; ?>" >
                                            <span class="<?php echo $item['atype'] == 1 ? 'x-color-green'
                                                : 'x-color-red'; ?>">
                                            <?php echo $item['atype'] == 1 ? '普通' : '焦点'; ?>
                                            </span>
                                    </td>
                                    <td class="am-text-middle change-status change-show" 
                                        data-status="<?php echo $item['status']; ?>"  data-id="<?php echo $item['id']; ?>">
                                            <span class="<?php echo $item['status'] == 1 ? 'x-color-green'
                                                : 'x-color-red'; ?>">
                                            <?php echo $item['status'] == 1 ? '显示' : '隐藏' ?>
                                            </span>
                                    </td>
                                    <td class="am-text-middle"><?php echo $item['create_time']; ?></td>
                                    <td class="am-text-middle">
                                        <div class="tpl-table-black-operation">
                                            <a href="<?php echo url('edit',
                                                ['id' => $item['id'] , 'category_id'=>$category['id']]); ?>">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="item-delete tpl-table-black-operation-del"
                                               data-id="<?php echo $item['id']; ?>">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; else: ?>
                                <tr>
                                    <td colspan="9" class="am-text-center">暂无记录</td>
                                </tr>
                            <?php endif; ?>
                            </tbody>
                        </table>    
                    </div>
                    <div class="am-u-lg-12 am-cf">
                        <div class="am-fr"><?php echo $list->render(); ?> </div>
                        <div class="am-fr pagination-total am-margin-right">
                            <div class="am-vertical-align-middle">总记录：<?php echo $list->total(); ?></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function changestatus(id, field,value){
    var ii = layer.load(0,{shade: [0.8,'#000']});
    $.post('<?php echo url('change') ?>' , {id:id ,field:field , value:value} , function(data){
        layer.msg(data.msg);
        layer.close(ii);
        setTimeout(() => {
            window.location.reload();
        }, 1500);
    });
}
    $(function () {

        // 删除元素
        var url = "<?php echo url('delete'); ?>";
        $('.item-delete').delete('id', url);

        // 更改属性
        $('.change-atype').click(function(){
            var value = $(this).data('atype') == 1 ? 2 : 1;
            var id = $(this).data('id');
            changestatus(id , 'atype' , value);
        });

        $('.change-show').click(function(){
            var value = $(this).data('status') == 1 ? 0 : 1;
            var id = $(this).data('id');
            changestatus(id , 'status' , value);
        });

    });
</script>

